<template>
	<view class="page ">
		<!-- 表单信息 start -->
		<view class="padding-lr">
			<view class="padding-tb text-lg solid-bottom flex align-center">
				<view class="text-bold margin-right"> {{i18n['取货人']}}</view>
				<view class="flex flex1 align-center">
					<input type="text" maxlength="8" v-model="name" :placeholder="i18n['取货人']" class="flex-sub"/>
				</view>
				
			</view>
			<view class="padding-tb text-lg  solid-bottom flex align-center">
				<view class="text-bold margin-right">{{i18n['联系电话']}}</view>
				<view class="justify-between flex flex1 align-center">
					<input type="number" maxlength="11" v-model="mobile" :placeholder="i18n['联系电话']" class="flex-sub"/>
					<text v-if="mobile.length > 0" class="margin-right-14 cuIcon-roundclosefill fu-fs36 text-999" @click="clear"
						></text>
				</view>
			</view>
			<view class="padding-tb text-lg solid-bottom flex align-center justify-between">
				<view class="text-bold"> {{i18n['设置默认取货人']}}</view>
				<switch class='switch' @change="handleSwitch" :class="is_default?'checked':''" :checked="is_default?true:false"></switch>
			</view>
		</view>
		<!-- 表单信息 end -->
		<!-- 提交按钮 start -->
		<view class="bottom-action margin-lr">
			<view class="bg-theme height-88 line-height-88 text-center radius-100 text-white" @click="sub_sure">{{i18n['保存']}}</view>
		</view>
		<!-- 提交按钮 end -->

		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->
	</view>
</template>

<script>
  import {
    validate
  } from "@/common/utils/index";
	export default {
		data() {
			return {
				mobile: '', // 联系电话
				name: '', // 收货人姓名
				sex: 0, // 性别 0:男 1:女
				is_default: false, // 是否设为默认地址
				edit_id: null, // 是否是修改收货地址
			};
		},
		onLoad(options) {
      const { id } = options;
      //如果是修改地址
      if (id) {
        this.edit_id = id;
        // 获取要修改的地址信息
        this.getOneInvite();
      }
      // 换标题文字
      this.setNavigationBarTitle(this.i18n['编辑提货人']);
		},
		methods: {
			/**
			 * @func 获取修改地址信息
			 */
			getOneInvite() {
				this.$api.post(global.apiUrls.postUserInviteGetOneInvite, {
					id: this.edit_id
				}).then(res => {
					if (res.data.code == 1) {
						let data = res.data.data;
						this.name = data.name; // 收货人姓名
						this.mobile = data.mobile; // 收货人电话
						this.is_default = data.is_default == '1' ? true : false; // 是否默认
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					this.$message.info('服务器错误，请稍后重试');
				})
			},
			/**
			 * @func 切换是否为默认地址
			 */
			handleSwitch(e) {
				this.is_default = e.detail.value;
			},
			/**
			 * @func 提交表单
			 */
			sub_sure() {
				// 表单验证
				if (this.name.trim() == '') return this.$message.info(this.i18n['请输入收货人姓名']);
        if (!this.mobile) return this.$message.info(this.i18n['请输入手机号']);
				if (!validate(this.mobile, 'phone')) return this.$message.info(this.i18n['手机号格式不正确']);
				let data = {
					name: this.name, // 收货人姓名
					mobile: this.mobile, // 收货人手机
					is_default: this.is_default ? '1' : '0', // 是否默认地址
				}
				// 判断提交的接口
				let url = global.apiUrls.postUserInviteAddInvite;
				if (this.edit_id) {
					data.id = this.edit_id
					url = global.apiUrls.postUserInviteEditInvite;
				}
				this.$api.post(url, data).then(res => {
          if (res.data.code == 1) {
            uni.$emit('refreshInviteList');
            this.$message.info(this.i18n['保存成功']);
            setTimeout(() => {
              uni.navigateBack()
            }, 800);
          } else {
            this.$message.info(res.data.msg)
          }
        }).catch(err => {
          
        })
			},
			/**
			 * @func 清除手机号
			 */
			clear() {
				this.mobile = '';
			}
		}
	}
</script>
<style lang="scss" scoped>
	page, .page {
		background: #FFFFFF;
		min-height: 100vh;
	}
	
	switch::before,
	switch::after {
		content: "";
	}

	.bottom-action {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 56rpx;
		bottom: calc(56rpx + constant(safe-area-inset-bottom));
		bottom: calc(56rpx + env(safe-area-inset-bottom));
	}

	.switch {
		transform: scale(0.7);
	}

	/deep/ uni-switch.checked-green .uni-switch-input {
		background-color: #39b54a !important;
		border-color: #39b54a !important;
		color: #ffffff !important;
	}
</style>
